<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>微信支付</title>
    <link href="https://cdn.bootcss.com/normalize/7.0.0/normalize.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.js"></script>
    <!--3.验证规则样式-->
    <link href="https://cdn.bootcss.com/jquery.bootstrapvalidator/0.5.3/css/bootstrapValidator.css" rel="stylesheet">
    <!--4.核心验证文件-->
    <script src="https://cdn.bootcss.com/jquery.bootstrapvalidator/0.5.3/js/bootstrapValidator.js"></script>
    <!--5.中文校验-->
    <script src="https://cdn.bootcss.com/jquery.bootstrapvalidator/0.5.3/js/language/zh_CN.js"></script>
    <script src="serviceItem/js/constants.js"></script>
    <script src="./js/qrcode/qrcode.js"></script>
    <style>
    .wh300 {
        width: 200px;
        height: 200px;
    }
</style>
    <script>
        $(function () {
            //确认
            $("#submit").click(function (){
                $.ajax(
                    {
                        url:WX_PAY_CREATEORDER,
                        data:{money:$("#money").val()},
                        success(res)
                        {
                            //预请求成功，获取支付链接
                            if (res.code==200&&res.data)
                            {
                                $.ajax({
                                    url:WX_PAY_GETURL,
                                    type:"POST",
                                    data:{order:res.data},
                                    success(getResult){
                                        console.log(getResult.data)
                                        $("#qrCode").qrcode({
                                            text:getResult.data,
                                            width:300,
                                            height:300,
                                            colorDark:"#000000",
                                            colorRight:"#ffffff",
                                        })
                                        let time=0;
                                        //每两秒查询一次支付状态
                                        let timer=setInterval(function () {
                                            $.ajax({
                                                url:WX_PAY_QUERY,
                                                data:{order:res.data},
                                                success(response){
                                                    if (response.data==0) {time++;}
                                                    else {
                                                        alert("支付成功");
                                                        location.href="index.html";
                                                        clearInterval(timer);
                                                    }
                                                    if (time>=15)
                                                    {
                                                        alert("支付超时");
                                                        clearInterval(timer);
                                                    }
                                                }
                                            })
                                        },2000)
                                    }
                                })
                            }
                        }
                    }
                )
            })
        })

    </script>
</head>
<body>
<div class="container-fluid">
    <form class="form-inline clearfix">
        <header class="page-header bg-success">
            <h3>微信支付</h3>
        </header>
        <div class="col-lg-12"></div>
        <div class="form-group col-lg-6">
            <div class="input-group">
                <div class="wh300">
                    <div id="qrCode" class="center-block"></div>
                </div>
            </div>
        </div>
        <div class="form-group row">
            <label class="sr-only" for="money">支付金额</label>
            <div class="input-group">
                <div class="input-group-addon ">￥</div>
                <input type="text" class="form-control" name="money" id="money" placeholder="请输入金额">
                <div class="input-group-addon">.00元</div>
            </div>
            <button type="button" class="btn btn-primary" id="submit">确认</button>
        </div>
    </form>
</div>
</body>
</html>